<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <!-- 不需要在节点上 增加 额外的属性！  结构伪类选择器-->
    <style type="text/css">
    /*01.改变ul中第一个li元素的样式    颜色是红色*/
    /*ul li:first-child{*/
        /*color: red;*/
    /*}*/
    /*02.改变ul中最后一个li元素的样式   颜色是黄色*/
    /*ul li:last-child{*/
        /*color: yellow;*/
    /*}*/
    /*03.改变页面中第3个p标签 颜色是红色！ 只看顺序 不看类型！
        001.无论p标签隐藏的多深！始终是自上而下的第1个p标签
        002.body节点下面第1个元素 如果是p 就显示样式
    */
    /*body p:nth-child(3){*/
        /*color: red;*/
    /*}*/
    /*04.改变页面中第3个p标签 颜色是黄色  先看类型    再看顺序*/
    body>p:nth-of-type(3){
        color: yellow;
    }
    /*05.改变第一个ul中的第一个li的样式 颜色是红色*/
        ul:nth-of-type(1) li:nth-of-type(1){
            color: red;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <span>span<p>p2</p></span>
    <div>div1
        <p>p3</p>
        <p>p4</p>
        <p>p5</p>
    </div>
    <div>div2<p>p6</p></div>
    <div>div3<p>p7</p></div>
    <p>p8</p>
    <p>p9</p>
    <p>p10</p>
<ul>
    <li>ul1_li1</li>
    <li>ul1_li2</li>
    <li>ul1_li3</li>
    <li>ul1_li4</li>
</ul>
<ul>
    <li>ul2_li1</li>
    <li>ul2_li2</li>
    <li>ul2_li3</li>
    <li>ul2_li4</li>
</ul>
</body>
</html>